<template>
  <ele-pro-table
    ref="table"
    size="mini"
    :columns="columns"
    :datasource="datasource"
    :selection.sync="selection"
    :need-page="true"
    :hideOnSinglePage="false"
  >
    <!--头部按钮-->
    <template v-slot:toolbar>
      <el-button type="primary" size="small" @click="addDeviceClick">
        添加设备
      </el-button>
        <el-button
          size="small"
          type="danger"
          icon="el-icon-delete"
          class="ele-btn-icon"
          @click="delCardAll">
          删除
        </el-button>
    </template>
    <!--// 设备在线状态:1-在线，0-不在线
    1.on（在线） 2.off（离线） 3.failed（锁定） 4.new（未注册）
    -->
    <template v-slot:useStauts="{ row }">
      <div class="flex">
        <div :class="row.status==1 ? 'green-icon' : row.status==4 ? 'red-icon' : 'default-icon'">
          {{row.status==1 ? '在线中' : row.status==2 ? '已离线': row.status==3 ? '锁定': row.status==4 ? '未注册': ''}}
        </div>
      </div>
    </template>
    <!--验证码-->
    <template v-slot:code="{ row }">
      <div class="width100 flex">
        <el-input
          class="input-class flex1" readonly :type="row.isVisble ? 'text' : 'password'" v-model="row.validateCode">
        </el-input>
        <img src="@/assets/passwordEye.png" style="width: 18px;height: 18px" @click="isVisbleClick(row)" />
      </div>
    </template>
    <!--操作-->
    <template v-slot:action="{ row }">
      <div class="flex-around">
        <el-link
          type="primary"
          :underline="false"
          @click.stop="editDevice(row)"
        >
          编辑
        </el-link>
        <!--暂不使用，请勿删除-->
        <!--<el-link
          type="warning"
          :underline="false"
          @click.stop="delSingle(row)"
        >
          解锁
        </el-link>-->
        <!--按理说，锁定状态，则不可划拨-->
        <el-link
          type="success"
          :underline="false"
          @click.stop="openTransfer(row)"
        >
          划拨
        </el-link>
        <el-link
          type="danger"
          :underline="false"
          @click.stop="delSingle(row)"
        >
          删除
        </el-link>
      </div>
    </template>
    <add-device ref="add" @reload="reload"></add-device>
    <oem-transfer :businessList="oemList" :visible.sync="showTransfer" :currentData="current" @done="reload"></oem-transfer>
  </ele-pro-table>
</template>

<script>
  import {queryCameraList, delCamera, deviceInformation, queryDeviceInfo} from "@/api/lncomingManagement/carmeraAgent"
  import {dyCommentList} from "@/api/releaseManage/tiktok";
  import addDevice from '../components/add-device'
  import OemTransfer from "@/views/lncomingManagement/carmeraAgent/list/components/oem-transfer";
    export default {
        name: "table-list",
      components: {OemTransfer, addDevice},
      props: {
        spaceList:Array,
        oemList:Array,
      },
      data() {
        return {
          // 当前编辑数据
          current: null,
          //是否显示划拨编辑弹窗
          showTransfer: false,

          // ture_展示密码，false_不展示
          // isVisble:false,
          visible:false,
          // 表格选中数据
          selection: [],
          columns: [
            {
              columnKey: 'selection',
              type: 'selection',
              width: 45,
              align: 'center'
            },
            /*{
              columnKey: 'index',
              type: 'index',
              width: 100,
              lable: 'sortValues',
              align: 'center',
              fixed: 'left',
              label: '排序'
            },*/
            {
              prop: 'displayName',
              label: '设备名称',
              align: 'center',
              showOverflowTooltip: true,
            },
            {
              // prop: 'spaceId',
              prop: 'spaceName',
              label: '所属空间',
              width: 150,
              align: 'center',
              showOverflowTooltip: true,
            },
            {
              prop: 'secondaryAgentName',
              label: '代理信息',
              align: 'center',
              showOverflowTooltip: true,
              slot: 'days',
              formatter: (_row, _column, cellValue) => {
                return cellValue ? cellValue+'-'+_row.linkman : '--';
              }
            },
            {
              prop: 'subSerial',
              label: '设备国标ID',
              align: 'center',
              showOverflowTooltip: true,
            },{
              prop: 'status',
              label: '设备状态',
              width: 150,
              align: 'center',
              showOverflowTooltip: true,
              slot: 'useStauts',
            },
            {
              prop: 'deviceSerial',
              label: '设备用户名',
              align: 'center',
              showOverflowTooltip: true,
            },
            {
              prop: 'validateCode',
              label: '设备密码',
              width: 160,
              align: 'center',
              showOverflowTooltip: true,
              slot: 'code',
            },
            {
              prop: 'createTime',
              label: '创建时间',
              align: 'center',
              showOverflowTooltip: true,
            },
            {
              label: '操作',
              columnKey: 'action',
              align: 'center',
              width: 250,
              resizable: false,
              slot: 'action',
              hideInSetting: true,
              showOverflowTooltip: true,
              fixed: 'right'
            }
          ],
          listCount:0
        };
      },
      methods: {
        // 添加设备
        addDeviceClick(){
          if(this.spaceList.length<0){
            this.$message.error("暂无空间，请先添加")
            return
          }
          if(this.listCount>=200){
            this.$message.error("一个空间最大不超过200个设备")
            return
          }
          this.$nextTick(()=>{
            this.$refs['add'].show(this.spaceList)
          })
        },

        // 编辑设备
        editDevice(row){
          this.$nextTick(()=>{
            this.$refs['add'].show(this.spaceList,row)
          })
        },
        // 查询套餐列表
        query(row){
          queryDeviceInfo({
            deviceSerial:row.deviceSerial,
          })
            .then((data) => {
              this.tableData = data.data[0].cloudStorageServiceRespList ? data.data[0].cloudStorageServiceRespList : [];
            })
            .catch((e) => {
              this.$message.error(e);
            });
        },
        // 密码展示与隐藏
        isVisbleClick(row){
          // this.isVisble = this.isVisble==true ? false :true
          row.isVisble = row.isVisble != true
        },

        /* 如果想在数据源里面获取到接口返回的数据, 增加 async 和 await */
        async datasource({ page, limit, where, order }) {
          const result = await queryCameraList({ ...where, ...order, page, limit,
            oemId:this.$store.state.user.info.oemId   //代理id
          });
          this.listCount=result.count //列表总数量，做限制200
          let arr = result.list
          for(let i = 0; i < arr.length; i++){
            arr[i].isVisble = false
          };
          return result;  // 修改分页返回：这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
        },
        /* 表格数据源 */
        /*datasource({ page, limit, where, order }) {
          console.log("this.datasource测试111111111111111",this.datasource)
          return queryCameraList({ ...where, ...order, page, limit,...this.form,
              oemId:this.$store.state.user.info.oemId   //代理id
          });
        },*/
            /* 刷新表格 */
            reload(where) {
            this.$refs.table.reload({ page: 1, where: where });
          },
        // /* 多个删除 */
        delCardAll(){
          if (!this.selection.length) {
            // 请选择需要操作的数据
            this.$message.error('请选择数据');
            return;
          }
          var ids=this.selection.map(item => {
            return item.id
          })
          this.delCard(ids)
        },
        /* 删除 */
        delSingle(row) {
          let ids=[]
          ids.push(row.id)
          console.log("ids====",ids)
          this.delCard(ids)
        },

        /* 打开划拨编辑弹窗 */
        openTransfer(row) {
          this.current = row;
          this.showTransfer = true;
        },
        delCard(ids){
          this.$confirm('此操作将永久删除该摄像头, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delCamera({
              ids:ids
            })
              .then((data) => {
                this.reload()
                this.$message.success('删除成功!');
              })
              .catch((e) => {
                this.$message.error(e);
              });
          }).catch(() => {
            this.$message.info('已取消删除');
          });
        },
      }
    }
</script>


<style scoped lang="less">

  .input-css input[disabled] //disadled:后台不可接收此input传值
  {
    background:#dddddd; //为带有disabled的input框添加背景颜色
    pointer-events:none;//鼠标点击不可修改
  }
  .staut-class{
    padding: 2px;
    width: 50px;
    color: #31A952;
    background-color: #E4FFEC;
  }
  .leave{
    color: #999999;
    padding: 2px;
    width: 50px;
    background-color: #FFF5F4;
  }


  .green-icon, .red-icon, .default-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 25px;
    font-size: 14px;
    border-radius: 2px;
  }
  .green-icon{
    background: #E4FFEC;
    color: #31A952;
  }
  .red-icon{
    background: #FFCCCD;
    color: #F00;
  }
  .default-icon{
    background: #FFF5F4;
    color: #999;
  }
</style>
